<template>
  <div>
    <van-space></van-space>
    <van-row>
      <van-col offset="10" span="5" colspan="5">
        <h3>舵机开关</h3>
      </van-col>
    </van-row>
    <van-space></van-space>
    <van-row>
      <van-col offset="8" span="5">
        <van-switch v-model="lightOn" @change="lightSwitch" size="4rem"/>
      </van-col>
    </van-row>
    <van-space></van-space>
    <van-row>
      <van-col offset="4" span="5" colspan="5">
        <span class="power_switch" @click="turnOnLight">
        <span class="on">
          <van-icon name="/images/power.svg" size="4rem"/>
        </span>
          </span>
      </van-col>
      <van-col offset="5" span="5">
         <span class="power_switch" @click="turnOffLight">
        <span class="off">
          <van-icon name="/images/power.svg" size="4rem" color="#00FF00FF"/>
        </span>
         </span>
      </van-col>
    </van-row>
    <van-space></van-space>

    <van-space></van-space>
    <van-collapse v-model="collapse">
      <van-collapse-item title="设置" name="robot_settings" icon="setting-o">
        <van-space></van-space>
        <van-row>
          <van-col offset="1" span="10">
            <van-button @click="resetPos" type="primary">
              复&nbsp;&nbsp;&nbsp;位
            </van-button>
          </van-col>
          <van-col offset="1" span="10">
            <van-button @click="setRange" type="warning">
              保存为开灯
            </van-button>
          </van-col>
        </van-row>
        <van-space></van-space>
        <van-row>
          <van-col offset="1" span="22">
            <van-slider active-color="#37c279" v-model="pos" @change="setPos" max="180" min="0"/>
          </van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse>

  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'servo_switch'
  , data() {
    return {
      pos: 90,
      collapse: [],
      currentLightDev: {},
      lightOn: false
    }
  }, methods: {
    onThen(resp) {

    },
    onFailed(e) {

    },
    setPos() {
      let url = '/setLocation/' + (this.pos);
      axios.get(url).then(this.onThen).catch(this.onFailed)
    }, resetPos() {
      this.pos = 90;
      this.setPos();
    }, setRange() {
      let url = '/setRange/' + (this.pos);
      axios.get(url).then(this.onThen).catch(this.onFailed)
    }, lightSwitch() {
      let url = '/lightSwitch/' + (this.lightOn ? '0' : '1');
      axios.get(url).then(this.onThen).catch(this.onFailed)
    }, turnOnLight() {
      this.lightOn = true;
      this.lightSwitch();
    }, turnOffLight() {
      this.lightOn = false;
      this.lightSwitch();
    }
  }
}
</script>
<style>
.off {
  display: inline-block;
  border-radius: 50%;
  filter: drop-shadow(1000px 0 0 var(--van-danger-color));
  transform: translate(-1000px);

}

.on {
  display: inline-block;
  border-radius: 50%;
  filter: drop-shadow(1000px 0 0 var(--van-success-color));
  transform: translate(-1000px);
}

.power_switch {
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ccc;
  padding: 1rem;
}
</style>
